/**
 * 抛物线动画
 * @param {*} e 点击事件对象
 */
export const parabolaAnimation = e => {
    if (!e) return;
    const start = {};
    const end = {};
    const endDom = document.querySelector('.task');
    const { top, left, width, height } = endDom.getBoundingClientRect();
    end.x = left + width;
    end.y = top + height;
    const { pageX, pageY } = e;
    start.x = pageX + 14;
    start.y = pageY + 12;
    // 创建一个div
    const div = document.createElement('div');
    div.className = 'add-to-car';
    const img = document.createElement('img');
    img.src = '/static/pageHeader/icon_task.png';
    img.className = 'iconfont i-jiajianzujianjiahao';
    // 设置开始位置
    div.style.transform = `translateX(${start.x}px)`;
    img.style.transform = `translateY(${start.y}px) scale(${3}`;
    div.appendChild(img);
    document.body.appendChild(div);
    // 强行渲染
    div.clientWidth;

    // 设置结束位置
    div.style.transform = `translateX(${end.x}px)`;
    img.style.transform = `translateY(${end.y}px) scale(${0.5})`;
    div.addEventListener(
        'transitionend',
        () => {
            div.remove();
            endDom.classList.add('animate');
        },
        // 事件仅触发一次
        { once: true }
    );
    document.querySelector('.task').addEventListener('animationend', () => {
        endDom.classList.remove('animate');
    });
};
